<template>
    <div>
        <div class="banner">
            <img src="@/assets/images/expert/banner.png" alt="">
        </div>
        <div class="main">
            <Panel
                title="名师资历"
                title-en="SENIORITY OF FAMOUS TEACHERS">
                <div class="seniors-teacher">
                    <img src="@/assets/images/expert/leading.png" alt="" srcset="">
                    <img src="@/assets/images/expert/IT.png" alt="" srcset="">
                    <img src="@/assets/images/expert/newbie.png" alt="" srcset="">
                    <img src="@/assets/images/expert/framework.png" alt="" srcset="">
                </div>
            </Panel>

            <Panel
                title="为什么选择我们的讲师"
                title-en="Why did we choose our teachers"
                id="reason">
                <div class="reason-card">
                    <div class="reason-card-list" 
                        v-for="(r, i) in reasons"
                        :key="i">
                        <div class="card-icon">
                            <img :src="r.images" alt="" srcset="">
                        </div>
                        <div class="card-name">
                            <p v-for="n in r.name" :key="n">{{n}}</p>
                        </div>
                        <div class="card-art">
                            <p v-for="art in r.art" :key="art">{{art}}</p>
                        </div>
                    </div>
                </div>
            </Panel>

            <Panel
                title="讲师团队介绍"
                title-en="Teacher Team Introduction">
                <!-- 前端 -->
                <div class="team" id="f2e">
                    <div class="team-title">前端讲师团队</div>
                    <div class="team-wrap">
                        <div class="team-item" 
                            v-for="(item, i) in f2e"
                            :key="i">
                            <div class="team-item__name">
                                {{item.name}}
                            </div>
                            <div class="team-item-desc">
                                <div class="team-item-desc__text">
                                    {{item.text}}
                                </div>
                                <ul class="team-item-desc__project">
                                    突出项目：
                                    <li v-for="p in item.projects"
                                        :key="p" v-text="p"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- UI -->
                <div class="team" id="ui">
                    <div class="team-title">UI讲师团队</div>
                    <div class="team-wrap">
                        <div class="team-item" 
                            v-for="(item, i) in ui"
                            :key="i">
                            <div class="team-item__name">
                                {{item.name}}
                            </div>
                            <div class="team-item-desc">
                                <div class="team-item-desc__text">
                                    {{item.text}}
                                </div>
                                <ul class="team-item-desc__project">
                                    突出项目：
                                    <li v-for="p in item.projects"
                                        :key="p" v-text="p"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- JAVA -->
                <div class="team" id="java">
                    <div class="team-title">JAVA讲师团队</div>
                    <div class="team-wrap">
                        <div class="team-item" 
                            v-for="(item, i) in java"
                            :key="i">
                            <div class="team-item__name">
                                {{item.name}}
                            </div>
                            <div class="team-item-desc">
                                <div class="team-item-desc__text">
                                    {{item.text}}
                                </div>
                                <ul class="team-item-desc__project">
                                    突出项目：
                                    <li v-for="p in item.projects"
                                        :key="p" v-text="p"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </Panel>
        </div>
    </div>
</template>

<script>
import Panel from "@/components/Panel";
export default {
    data() {
        return {
            reasons: [
                {
                    images: require('@/assets/images/expert/06.gif'),
                    name: [
                        "八年以上项目经验",
                        "项目经验丰富"
                    ],
                    art: [
                        '所有讲师均有大型企业相关领域八以上从业经验，能力突出，具备带队开发能力。',
                        '迅科教育所有讲师均主导过至少三个省级项目，或者合同单价三百万以上的大中型项目，实战能力突出。'
                    ]
                }, {
                    images: require('@/assets/images/expert/11.gif'),
                    name: [
                        "两年以上新人", "培养经验",
                    ],
                    art: [
                        '所有讲师在企业均有两年以上带新人经验，擅于比拟，把抽象的概念用通俗的术语生动形象的表达出来，构建良好的课堂氛围。'
                    ]
                }, {
                    images: require('@/assets/images/expert/03.gif'),
                    name: [
                        "高薪就业", "成就英才"
                    ],
                    art: [
                        '不仅学的好，更保障每位学员就业好。聘请资深人资经理出任职业发展顾问，为学员提供一年期，三年期，五年期职场发展服务，一次学习，终身受益，保障学员成为IT精英。'                    
                    ]
                }, {
                    images: require('@/assets/images/expert/14.gif'),
                    name: [
                        "企业级", "金牌课程"
                    ],
                    art: [
                        '依托三百多家IT名企合作资源，始终保持技术体系的先进性，引入企业外包带薪项目，每个学员边学习，边做企业外包带薪项目，做到与企业无缝衔接。'
                    ]
                }, {
                    images: require('@/assets/images/expert/19.png'),
                    name: [
                        "全省最丰富的", "名企资源"
                    ],
                    art: [
                        '拥有三百多家IT名企合作资源，与数十家IT企业签署定制式人才培养协议，学员进入企业实践实习，顶岗培训，带薪做项目，每年数十场迅科学员专场招聘会。',
                    ]
                }, {
                    images: require('@/assets/images/expert/26.gif'),
                    name: [
                        "企业项目经理", "亲自授课"
                    ],
                    art: [
                        '在大型IT企业负责重要的技术岗位，一般为项目经理以上，直至技术总监、研发主任，或者资深设计师、架构师等。',
                    ]
                }, {
                    images: require('@/assets/images/expert/22.gif'),
                    name: [
                        "热爱教育", "以身作则", "有责任心"
                    ],
                    art: [
                        '迅科教育的讲师强调奉献精神，有爱心，有责任感。认真耐心教导每一位同学，是我们每位讲师的不变承诺。',
                    ]
                }, {
                    images: require('@/assets/images/expert/29.gif'),
                    name: [
                        "企业一线", "专家名师执教",
                    ],
                    art: [
                        '坚持聘请一线精英执教，企业真实项目进课堂。每位讲师均至少七年项目研发经验，两年带新员工经验，擅长把抽象原理转换为形象比喻。保证每个学员融会贯通，举一反三。',
                    ]
                }
            ],
            f2e: [
                {
                    name: "甘工程师",
                    text: "资深前端工程师，曾就职于网龙，未名集团等大型IT企业，专注vue全家桶研究与开发，精通knockout.js和react，擅长新人培养，其独创的启发式教学法，曾助力无数学员实现高薪梦想，对培养学员编程思想，自学能力有独到的见识解和方法。各大IT公司都遍布其学员。热爱教育事业，喜欢将个人项目能力，学习方法和职场经验倾囊相授，深受学员喜爱。",
                    projects: [
                        "网龙elearning在线教育平台；",
                        "fishcoo.com学习交流平台",
                        "集结兔同城配送物流管理理系统",
                        "闽商圈门户平台",
                    ]
                }, {
                    name: "陈工程师",
                    text: "资深前端工程，现任四创软件高级工程师，近十年前端开发经验，以身作则对代码质量要求一丝不苟，追求完美，几近严苛，注重学员的编程习惯和代码思路培养，有助于学员养成良好的代码风格和编程习惯，为日后进入企业工作打下夯实基础。",
                    projects: [
                        "四创防灾云平台；",
                        "四创智慧水利平台；",
                        "台风路径监测平台；",
                        "气象综合防灾减灾平台；",
                    ]
                }, {
                    name: "林工程师",
                    text: "资深前端工程师，现IGG研发部经理，曾就职于腾讯、百度等大型IT公司，有丰富的项目带队开发经验，对前端全栈开发，性能优化，产品和用户体验有深入研究，热爱教育事业，有较为丰富的授课和新人培养经验，喜欢将项目知识以更为通俗形象的方式传达予学员。曾翻译CSS3经典书籍《Practical Css3：Develop and Design》,个人著作《CSS3实战：开发与设计》畅销数十万册。",
                    projects: [
                        "腾讯朋友网、QQ空间、云平台、广点通等项目；",
                        "腾讯门户平台美食、军事频道前端技术主导。"
                    ]
                }, {
                    name: "李工程师",
                    text: "七年前端开发经验，曾就职于北京搜狐公司，百度，网龙等一线大型IT企业。现就职于福建联迪商用设备有限公司，前端开发部核心组骨干精英，主要负责联迪高端POS机前端开发和技术研究。多年的一线前端开发经验，对JS核心，工作流和MVC(AngularJS、Backbone)框架有深入研究。热爱教育行业，负责百度、联迪等多家IT公司工程师内训。",
                    projects: [
                        "银联POS智能终端的支付应用。包含了收款，电子现金，以及个性化定制支付，目前此项目已全面覆盖银商，市场占有率80%等大型项目……",
                    ]
                }, {
                    name: "邱工程师",
                    text: "10年一线IT开发经验，毕业于福州大学物信学院，曾就职于新大陆通信，现就职于福建联迪商用设备有限公司，前端开发部核心组骨干精英，主要负责联迪高端POS机软件开发和技术研究。技术研究深入，拥有多个大型项目经验，授课耐心细致，长期徜徉于学生qq群内解答技术，学员对其有囗皆碑。",
                    projects: [
                        "联迪公司各基于Android平台的H5智能应用",
                        "产品研发",
                        "银商和第三方客服项目开发",
                        "新大陆电视支付项目等",
                    ]
                }, {
                    name: "雷工程师",
                    text: "毕业于福建师范大学，7年网站开发经验，曾就职于网龙，现就职于搜狐17173。上课风趣幽默，擅长将抽象的知识形象比喻，细致耐心的教学风格深受广大学员的喜爱，特别擅长大型web站群的开发，更是一位难得的精通前后端的全栈工程师。",
                    projects: [
                        "17173各集群站点开发，注册用户超过7000万，日均浏览量超过7500万次的大型游戏门户站群。",
                        "国内第一游戏平台畅游各集群站开发。",
                        "网龙公司各站群开发。",
                    ]
                }
            ],
            ui: [
                {
                    name: "池设计师",
                    text: "擅长UI，UE,UX设计，高级项目经理，现任IGG高级游戏UX设计师。曾就职于百度、网龙，美图秀秀，星网锐捷等大型IT公司P7级别岗位。参与过多个千万级项目的UI主导与管理工作。",
                    projects: [
                        "主导设计星网锐捷K米APP、KTV视频点歌VOD系统；",
                        "负责网龙91系列项目主美工作；",
                    ]
                }, {
                    name: "陈工程师",
                    text: "新大陆资深UI设计师，曾任职网龙、星网锐捷等各大IT公司设计部，教学风格认真细腻，体贴耐心。擅长各风格UI设计和HTML5动画设计。",
                    projects: [
                        "星网视易K米魔云",
                        "多唱K吧、",
                        "娱加”酒吧管理系统等多款大型软件的UI设计主导工作。"
                    ]
                }, {
                    name: "蔡设计师",
                    text: "从事设计相关工作18年以上,曾就职于亚仿科技，网龙公司。擅长UI设计，web设计，3d动画制作，unity场景设计。",
                    projects: [
                        "广东省科技馆多媒体项目；",
                        "广州地铁虚拟仿真项目；",
                        "网龙3dhome,u3d游戏； ",
                        "财升智娱系统；吉高高校沙盘系统；",
                    ]
                }, {
                    name: "陈设计师",
                    text: "擅长UI移动端及PC端界面设计，AE动效设计。Adobe 认证网页设计；Adobe 认证平面设计；Adobe认证界面设计；Adobe认证交互设计；Adobe认证教师；Adobe（ACA）国际认证设计师。",
                    projects: [
                        "国内知名上市公司多款APP，", 
                        "网页界面端设计。",
                    ]
                }, {
                    name: "黄设计师",
                    text: "新大陆软件资深UI设计师，UI设计组组长。8年互联网行业从业经验。对多媒体展馆高端UI设计、交互设计以及移动互联网产品UI设计有深刻的研究。",
                    projects: [
                        "福建省科技馆全馆多媒体设计。",
                        "智慧车网综合服务管理平台设计。",
                        "马尾两岸物联网应用示范中心全管多媒体界面设计。",
                    ]
                }, {
                    name: "张设计师",
                    text: "资深UI设计师、10年以上设计经验。现就职于福建富士通信息软件有限公司。公司资深内训师，负责公司内部高级UI设计师技术提高内训。拥有丰富的企业级应用和移动应用的UI设计经验。主导过众多电信大型应用UI设计工作。",
                    projects: [
                        "《水务系统》、《电子合同》、翼支付、电信在线商城等",
                    ]
                }
            ],
            java: [
                {
                    name: "翁工程师",
                    text: "资深软件架构师、软件外包公司高级合伙人（14年行业从业经历，10年授课经历）；历任福建东南网络公司研发部高级项目经理 、福建省广播电视网络总公司研发部高级项目经理、大数据分析平台设计规划、开发和实施（hadoop生态圈）、Android无线移动应用解决方案、软件开发团队管理；担任过众多广电、政务等大型软件项目架构师、高级项目经理等角色。",
                    projects: [
                        "福建省广电数字收费系统",
                        "福建省行政事业收费系统",
                        "福建省建设银行扣缴费网关系统",
                        "福建省交通厅“掌上工程”道路工程质控系统（Android平台）"
                    ]
                }, {
                    name: "李工程师",
                    text: "资深架构师，博思软件高级项目工程师，授课风格耐心细致，风趣幽默，深受学员喜爱，最擅长将艰深晦涩的知识娓娓道来，细腻生动。开发过众多大型财政类项目，千万级用户项目——《福州惠民网》主力后端工程师。",
                    projects: [
                        "福建省安全生产宣传教育培训系统", 
                        "福建省工商办公自动化系统", 
                        "福建省煤矿安全资格网络考试系统", 
                    ]
                }, {
                    name: "林工程师",
                    text: "高级Java工程师，现就职于新大陆支付，熟悉SpingMVC，Spring，Hibernate，Mybatis 等框架开发，精通Oracle，MySQL 等数据库技术。参与新大陆多个大型项目的开发和架构工作。",
                    projects: [
                        "新大陆ERP管理系统；",
                        "新大陆扫码盒子；",
                        "银联E外卖系统；",
                        "银商商终密系统"
                    ]
                }, {
                    name: "庄工程师",
                    text: "高级架构师，现任长威软件项目经理，十五年以上IT行业从业经历，七年以上授课经历。对行业新人培养有丰富的经验和独到的方式，对课程知识的讲授深入浅出，通俗易懂。擅长JAVA EE行业应用解决方案， JAVA大数据应用解决方案和软件项目团队管理。",
                    projects: [
                        "东南汽车经销商管理系统", 
                        "福建省经贸委信息管理系统", 
                        "福建嘉达纺织办公自动化系统", 
                    ]
                }, {
                    name: "吴工程师",
                    text: "十余年IT一线工作经验，现就职于大型国企信息部，ERP系统设计专家，专注于ERP系统的设计和代码编写，熟悉web前端开发，精通JAVA框架级开发、Oracle和SQL SERVER等数据库的管理和数据库的设计与实现。拥有丰富的IT新人培养和授课经验，对JAVA初学者和初入职场的新人培养有独到的见解。",
                    projects: [
                        "常年从事ERP系统的设计，整个包含产品销售系统、产品生产核心系统计划系统、仓库管理系统以及辅助办公系统，采用多层架构，高效安全，稳定性极高。",
                    ]
                }, {
                    name: "雷工程师",
                    text: "精通J2SE中的I/O流编程、网络编程、线程技术及J2EE平台架构等，对使用Struts、JDBC、Hibernate、EJB、IBatis、Spring等框架技术构建有丰富的经验。熟练使用Oracle和SQLServer数据库管理，塾悉Oracle的体系框架架构。",
                    projects: [
                        "市防空警报系统",
                        "交通监控系统",
                        "车辆信息管理系统",
                        "物流调度系统",
                        "商务宝"
                    ]
                }
            ]
        }
    },
    components: {
        Panel
    }
}
</script>

<style lang="less" scoped>
.banner{
    font-size: 0;
}
img{
    max-width: 100%;
}
.seniors-teacher{
    display: flex;
    justify-content: space-between;
}
#reason{
    margin-bottom: 250px;
}
.reason-card{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &-list{
        width: 270px;
        height: 450px;
        background: #fff;
        box-shadow: -3.58458893px 7.15197331px 21px 0 rgba(41, 41, 41, 0.5);
        margin-bottom: 50px;
        box-sizing: border-box;
        border-radius: 5px;
        padding: 60px 17px 39px;
        .card-icon{
            width: 40px;
            height: 40px;
            // background: #108CF8;
            margin-bottom: 28px;
        }
        .card-name{
            color: #108CF8;
            margin-bottom: 25px;
            p{
                margin: 0 0 17px 0;
            }
            p:last-child{
                margin: 0;
            }
        }
        .card-art{
            line-height: 30px;
            text-indent: 2em;
            p{
                margin: 0;
            }
        }
    }
    &-list:nth-child(2n) {
        position: relative;
        top: 150px;
    }
}


.team{
    overflow: hidden;
    &-title{
        width: 336px;
        height: 68px;
        line-height: 68px;
        text-align: center;
        color: #fff;
        background: #FFBA5B;
        margin: 0 auto 74px;
        border-radius: 68px;
        font-size: 24px;
    }
    &-wrap{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    &-item{
        width: 312px;
        height: 586px;
        box-sizing: border-box;
        background: rgba(255, 186, 91, .58);
        padding: 30px;
        color: #fff;
        overflow: hidden;
        &__name{
            font-size: 26px;
            margin-bottom: 50px;
            position: relative;
            &::after{
                content: '';
                display: block;
                width: 120px;
                height: 5px;
                background: #fff;
                position: absolute;
                left: 0;
                bottom: -18px;
            }
        }
        &-desc{
            padding-left: 5px;
            &__text{
                line-height: 26px;
                margin-bottom: 40px;
            }
            &__project{
                margin: 0;
                padding: 0;
                list-style: none;
            }
        }
        &:first-child{
            margin-bottom: 20px;
        }
    }
}
#f2e{
    padding: 39px 58px 52px 68px;
    background: url('~@/assets/images/expert/f2e.png');
    margin-bottom: 94px;
}
#ui{
    padding: 39px 58px 52px 68px;
    background: url('~@/assets/images/expert/ui.png');
    margin-bottom: 94px;
    .team-title{
        background: #c749fc;
    }
    .team-item{
        background: rgba(199, 73, 252, .58);
        height: 428px;
    }
}

#java{
    padding: 39px 58px 52px 68px;
    background: url('~@/assets/images/expert/java.png') no-repeat;
    .team-title{
        background: #09c9a7;
    }
    .team-item{
        background:rgba(9, 201, 167, .58);
        height: 570px;
    }
}


</style>
